<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/login.css"/>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/toastr.min.css"/>
    <title>首页</title>
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.2.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/common.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/login.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/vue.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/toastr.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/axios.min.js"></script>
</head>
<body>
<!-- 导航界面 -->
<nav>
    <div class="nav">
        <span class="lf">终于等到你</span>
        <span class="rt">爱下载资源分享平台</span>
    </div>
</nav>

<!-- 登录面板 -->
<section class="main">
    <div class="login-type">
        <a class="checked" name="login-pwd">密码登录</a><a name="login-sms">短信码登录</a>
    </div>

    <form class="login-pwd login-panel" autocomplete="off">
        <input type="text" name="tel" class="inp user" placeholder="手机号" v-model.trim="tel"/>
        <input type="password" name="password" class="inp pwd" placeholder="密码" v-model.trim="password"/>
        <!-- 处理密码眼睛 -->
        <span class="eye clos"></span>
        <div class="re">
            <input type="checkbox" name="remember-me" id="remember-me" v-model="rememberMe"/>
            <label for="remember-me">下次自动登录</label>
            <a class="find-pass" href="findpass.html">忘记密码，立即找回</a>
        </div>

        <a class="log-btn" @click="handlerLogin">登录</a>

        <a href="${pageContext.request.contextPath}/user/register" class="regist">没有账号？立即注册</a>


    </form>

    <form class="login-sms login-panel" autocomplete="off">
        <input type="text" name="tel" class="inp tel" placeholder="手机号"/>
        <input type="code" name="code" class="inp code" placeholder="验证码"/>
        <span class="btn-code">获取验证码</span>

        <div class="re">
            <input type="checkbox" name="remember-me" id="remember"/>
            <label for="remember">下次自动登录</label>
        </div>

        <a class="log-btn">登录</a>

        <a href="register.html" class="regist">没有账号？立即注册</a>

    </form>

    <div class="third">
        <span class="lf"></span>第三方登录<span class="rf"></span>
    </div>

    <p class="third">
        <a class="zfb"><span>支付宝</span></a>
        <a class="wx"><span>微信</span></a>
        <a class="qq"><span>QQ</span></a>
    </p>

</section>

<jsp:include page="/WEB-INF/common/footer.jsp" />


<script>
    new Vue({
        el: ".main",
        data: {
            tel: "",
            password: "",
            rememberMe: true,
        },
        methods: {
            handlerLogin(event){
                if (this.tel == "") {
                    toastr.error("手机号不允许为空") ;
                    return ;
                }

                if (!/^1[3-9]\d{9}$/.test(this.tel)) {
                    toastr.error("手机号格式不正确") ;
                    return ;
                }
                // 校验密码
                if (this.password == "") {
                    toastr.error("密码不允许为空") ;
                    return ;
                }
                // 如果账号和密码都输入，则发送异步请求
                axios.post("${pageContext.request.contextPath}/login", {username: this.tel,
                                password: this.password, rememberMe: this.rememberMe}).then(ret=> {
                    // 如果 成功
                    if (ret.data.success) {
                        // 跳转到首页
                        window.location.href = "${pageContext.request.contextPath}/" ;
                    }else{
                        toastr.error(ret.data.message) ;
                    }

                })

            }
        }

    })
</script>
</body>

</html>